<template>
    <div class="layoutBox">
        <el-divider border-style="dashed"><span class="customTitle">布局方式</span></el-divider>
        <div class="sample">
            <!-- 默认布局样式 -->
            <div class="left" @click="handleDefault">
                <div class="leftStyle"></div>
                <div class="rightStyle">
                    <div class="topStyle"></div>
                    <div class="bottomStyle">
                        <span>默认布局</span>
                    </div>
                </div>
            </div>
            <!-- 单栏布局样式 -->
            <div class="right" @click="handleClassics">
                <div class="topStyle"></div>
                <div class="bottomStyle">
                    <span>单栏布局</span>
                </div>
            </div>
        </div>
        <el-divider border-style="dashed"><span class="customTitle">效果设置</span></el-divider>
        <div class="isDark" v-for="item in tempSwitch">
            <span>{{ item.title }}</span>
            <el-switch
                class="switch"
                v-model="item.model"
                inline-prompt
                :active-icon="item.openIcon"
                :inactive-icon="item.closeIcon"
                @change="handleCg(item)"
            />
        </div>
        <div class="isDark">
            <span>后台动画方式</span>
            <el-select v-model="viewData.animations">
                <el-option :value="item" v-for="item in mainAnimations">{{ item }}</el-option>
            </el-select>
        </div>
        <el-divider border-style="dashed"><span class="customTitle">样式设置</span></el-divider>
        <div class="settingHeader" v-for="(item, index) in temp" :key="index">
            <div class="pickerBox">
                <span class="customTitle">{{ item.title }}</span>
                <el-color-picker v-model="item.model" @change="handleCgStyle(item)" :show-alpha="item.showAlpha" />
            </div>
            <el-button>
                <span class="customTitle" @click="handleRestoreDefault(item)">恢复默认</span>
            </el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import type { ITempChild, ITempSwitchChild, ITempSwitch } from '@/components/layouts/lib/settingStyle'
import { reactive, watch } from 'vue'
import { mainAnimations } from '@/utils'
import { useDark, useToggle } from '@vueuse/core'
import { useSetting } from '@/store'
import { temp } from '@/components/layouts/lib/settingStyle'

const settingStore = useSetting()

const viewData = reactive({
    drawer: false,
    animations: settingStore.getSetting('mainAnimation'),
})

const tempSwitch = reactive<ITempSwitch>({
    dark: {
        title: '暗黑模式',
        openIcon: 'Moon',
        closeIcon: 'Sunny',
        model: settingStore.setting!.isDark,
    },
})

const settingClose = () => {
    viewData.drawer = false
}

// 默认布局
const handleDefault = () => {
    settingStore.setSetting('layout', 'default')
}

// 经典布局
const handleClassics = () => {
    settingStore.setSetting('layout', 'classics')
}

// 切换暗黑模式
const isDark = useDark({
    storageKey: 'dark',
    selector: 'html',
    attribute: 'class',
    valueDark: 'dark',
    valueLight: 'light',
})

const toggleDark = useToggle(isDark)

const handleCg = (item: ITempSwitchChild) => {
    if (item.title === tempSwitch.dark.title) {
        toggleDark()
        settingStore.setSetting('isDark', tempSwitch.dark.model)
    }
}

// 设置样式
const handleCgStyle = (item: ITempChild) => {
    if (temp[item.name].name === item.name) {
        settingStore.setSetting(item.name, item.model)
        temp[item.name].model = item.model
        useStyle(item.scssVar, item.model)
    }
}

// 恢复默认值
const handleRestoreDefault = (item: ITempChild) => {
    if (temp[item.name].name === item.name) {
        settingStore.setSetting(item.name, '')
        temp[item.name].model = ''
        useStyle(item.scssVar, '')
    }
}

// 定义设置样式的方法
const useStyle = (name: string, color: string) => {
    document.getElementsByTagName('html')[0].style.setProperty(name, color)
}

watch(
    () => viewData.animations,
    () => {
        settingStore.setSetting('mainAnimation', viewData.animations)
    },
)
</script>

<style scoped lang="scss">
.layoutBox {
    min-height: 10rem;
    .sample {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .left {
            width: 48%;
            min-height: 10rem;
            border: 1px solid #ddd;
            cursor: pointer;
            padding: 0.4rem;
            box-sizing: border-box;
            display: flex;
            .leftStyle {
                width: 20%;
                min-height: 10rem;
                background: var(--header-drawer-layout-bg);
            }
            .rightStyle {
                margin-left: 0.5rem;
                width: 80%;
                .topStyle {
                    width: 100%;
                    min-height: 2rem;
                    background: var(--header-drawer-layout-bg);
                }
                .bottomStyle {
                    width: 100%;
                    min-height: 8rem;
                    background: var(--header-drawer-layout-bg);
                    margin-top: 0.5rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    span {
                        color: var(--header-drawer-color);
                    }
                }
            }
        }
        .right {
            margin-left: 1rem;
            width: 48%;
            min-height: 10rem;
            border: 1px solid #ddd;
            cursor: pointer;
            padding: 0.4rem;
            box-sizing: border-box;
            .topStyle {
                width: 100%;
                min-height: 2rem;
                background: var(--header-drawer-layout-bg);
            }
            .bottomStyle {
                margin-top: 0.5rem;
                width: 100%;
                min-height: 8rem;
                background: var(--header-drawer-layout-bg);
                display: flex;
                align-items: center;
                justify-content: center;
                span {
                    color: var(--pt-color-regular);
                }
            }
        }
    }
    .isDark {
        display: flex;
        align-items: center;
        span {
            color: var(--pt-color-regular);
            font-size: 1rem;
            margin-right: 0.5rem;
        }
    }
}

.customTitle {
    color: var(--pt-color-regular);
    font-size: 1rem;
}

.settingHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    .pickerBox {
        min-width: 12rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

.isDark :deep(.switch) {
    .el-switch__core {
        border-color: var(--header-drawer-color);
        background-color: var(--header-drawer-color);
    }
}
</style>
